import React, { Component } from 'react';
import '../styles/Login.css'
import { user_login } from '../api/login';
class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: '',
            pass: '',
            agree:false,
        }
    }
    changeCount(e) {
      
        this.setState({
            [e.target.name]:e.target.type==='checkbox'?e.target.checked: e.target.value
        })
    }
    login() {
        if (!this.state.phone||!this.state.pass) {
            alert("用户/密码不能为空")
        } else {
            if (!this.state.agree) {
                alert("请先勾选用户登录协议")
            } else {
           
                    user_login({ phone:this.state.phone, pass: this.state.pass }).then(res => {
                        console.log(res)
                        if (res.data.code === 400) {
                            alert('用户未注册')
                        } else {
                            alert("登陆成功")
                            localStorage.setItem("token",res.data.token)
                        }
                    })
                }
        }
        
            
        
        
    }
    // componentDidMount() {
    //     user_login({ phone: localStorage.getItem("phone"), pass: localStorage.getItem("pass") }).then(res => {
    //         console.log(res)
    //     })
    // }
    render() {
        return (
            <div className='login'>
                <div className='lo_box'>
                    <img src="https://img1.baidu.com/it/u=453253244,3693084626&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1671210000&t=a1d8d1cd8cb756bdf842abe5f9d7bb13" alt="" />
                    <br />
                <input  name='phone' value={this.state.value} onChange={(e)=>{this.changeCount(e)}} type="text" placeholder='请输入用户名' /><br />
                <input name='pass' value={this.state.pass} onChange={(e)=>{this.changeCount(e)}} type="password" placeholder='请输入密码' />
                
                    <div className='btn'>
                    <input type="checkbox" name='agree' checked={this.state.agree} onChange={(e)=>{this.changeCount(e)}} className="check" /><span>勾选用户登录协议</span>
                        <button onClick={()=>{this.login()}}>登录</button><br />
                        <a href="#">注册</a>
                </div>
                
                </div>
                 </div>
        );
    }
}

export default Login;